import 'jquery';
import React from 'react';

import { Row, Col } from '../../../../components/grid/Grid.jsx';

import WaveSurfer from  '../../../../components/waveSurfer/wavesurfer.js/wavesurfer'
import WaveSurferRegions from '../../../../components/waveSurfer/wavesurfer.js/plugin/wavesurfer.regions'

export default class AudioAnalyser extends React.Component{
  constructor(props){
    super(props)
    this.state={}
  }

  componentDidMount(){

    this.wavesurfer = WaveSurfer.create({
      container: '#waveform',
      waveColor: 'darkorange',
      progressColor: 'purple',
      // splitChannels: true,
      // cursorColor: '#fff', // 光标颜色
      height: 64,
      plugins: [WaveSurferRegions.create({
        regions: [
          {
            drag: false,
            start: 1,
            end: 20,
            color: 'rgba(255, 0, 0, 0.8)'
          },
          {
            drag: false,
            start: 30,
            end: 60,
            color: 'rgba(255, 0, 0, 0.8)'
          }
        ],
        dragSelection: {
          slop: 5
        }
      })]
    });
    this.wavesurfer.load('./src/static/flac.flac');
    // this.wavesurfer.load('./src/static/warning.mp3');
    this.wavesurfer.on('ready',  () => {
      this.setState({
        duration: this.wavesurfer.getDuration()
      })
    });

    this.wavesurfer.on('region-click', e=>{
      // console.log(e)
      // this.wavesurfer.play(e.start, e.end);
      this.wavesurfer.regions.list[e.id].play(e.start, e.end);
      // console.log(this.wavesurfer.regions.list[e.id])
    })

    // console.log(this.wavesurfer)
    // console.log(this.wavesurfer.regions)

  }
  render(){
    let { duration } = this.state;
    return <div>
      <Row type={'float'} span={12}>
        <Col>
          <div id="waveform"></div>
          <p align="center">
            <button className="btn btn-primary" onClick={()=>{this.wavesurfer.playPause()}}>
              <i className="glyphicon glyphicon-play"></i>
              Play / Pause
            </button>
            <span>{ duration }</span>
          </p>
        </Col>
      </Row>
    </div>
  }
}